<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态表情互动</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      font-family: 'Arial', sans-serif;
      overflow: hidden;
      cursor: default;
    }

    .container {
      text-align: center;
      position: relative;
      z-index: 10;
    }

    h1 {
      color: #e91e63;
      margin-bottom: 40px;
      font-size: 2.5em;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
    }

    .face-container {
      position: relative;
      margin: 0 auto 40px;
    }

    .face {
      width: 200px;
      height: 200px;
      background-color: #ffeb3b;
      border-radius: 50%;
      position: relative;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      transition: all 0.2s ease;
    }

    .eyes {
      display: flex;
      justify-content: center;
      padding-top: 50px;
      transition: all 0.3s ease;
    }

    .eye {
      width: 30px;
      height: 40px;
      background-color: #333;
      border-radius: 50%;
      margin: 0 20px;
      position: relative;
      transition: all 0.3s ease;
    }

    .eyebrow {
      width: 40px;
      height: 8px;
      background-color: #333;
      position: absolute;
      top: -15px;
      left: -5px;
      border-radius: 5px;
      transition: all 0.3s ease;
    }

    .mouth {
      width: 100px;
      height: 40px;
      margin: 30px auto 0;
      border-radius: 0 0 50px 50px;
      background-color: #333;
      transition: all 0.3s ease;
    }

    .blush {
      width: 40px;
      height: 20px;
      background-color: #ff8a80;
      border-radius: 50%;
      position: absolute;
      top: 80px;
      opacity: 0;
      transition: all 0.3s ease;
    }

    .blush.left {
      left: 20px;
    }

    .blush.right {
      right: 20px;
    }

    .btn {
      padding: 12px 30px;
      font-size: 1.2em;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      z-index: 20;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      margin: 0 15px;
    }

    .yes {
      background-color: #4caf50;
      color: white;
    }

    .no {
      background-color: #f44336;
      color: white;
    }

    .btn:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

    .hearts {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 5;
    }

    .heart {
      position: absolute;
      font-size: 24px;
      color: #ff4081;
      animation: float 4s ease-in-out infinite;
      opacity: 0;
    }

    @keyframes float {
      0% { transform: translateY(0) rotate(0deg); opacity: 1; }
      100% { transform: translateY(-150px) rotate(360deg); opacity: 0; }
    }

    .message {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 30px 40px;
      border-radius: 15px;
      box-shadow: 0 15px 30px rgba(0,0,0,0.2);
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      transition: all 0.5s ease;
      text-align: center;
      max-width: 80%;
    }

    .message.show {
      opacity: 1;
      pointer-events: all;
    }

    .message h2 {
      color: #e91e63;
      margin-top: 0;
    }

    .close-btn {
      background-color: #e91e63;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 50px;
      cursor: pointer;
      margin-top: 20px;
      transition: all 0.3s;
    }

    .close-btn:hover {
      background-color: #c2185b;
    }

    .follow-mouse {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: rgba(233, 30, 99, 0.3);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
<div class="container">
  <h1 id="question">请问你能做我的女朋友吗？</h1>

  <div class="face-container">
    <div class="face" id="face">
      <div class="eyes" id="eyes">
        <div class="eye-container">
          <div class="eyebrow left-eyebrow"></div>
          <div class="eye left-eye"></div>
        </div>
        <div class="eye-container">
          <div class="eyebrow right-eyebrow"></div>
          <div class="eye right-eye"></div>
        </div>
      </div>
      <div class="mouth" id="mouth"></div>
      <div class="blush left"></div>
      <div class="blush right"></div>
    </div>
    <div class="hearts" id="hearts"></div>
  </div>

  <div class="buttons">
    <button class="btn yes" id="yesBtn">同意</button>
    <button class="btn no" id="noBtn">拒绝</button>
  </div>
</div>

<div class="message" id="message">
  <h2>太棒了！❤️</h2>
  <p>这是我生命中最美好的一天！</p>
  <button class="close-btn" id="closeMsg">关闭</button>
</div>

<script>
  const face = document.getElementById('face');
  const eyes = document.getElementById('eyes');
  const mouth = document.getElementById('mouth');
  const leftEye = document.querySelector('.left-eye');
  const rightEye = document.querySelector('.right-eye');
  const leftEyebrow = document.querySelector('.left-eyebrow');
  const rightEyebrow = document.querySelector('.right-eyebrow');
  const yesBtn = document.getElementById('yesBtn');
  const noBtn = document.getElementById('noBtn');
  const hearts = document.getElementById('hearts');
  const message = document.getElementById('message');
  const closeMsg = document.getElementById('closeMsg');
  const blushes = document.querySelectorAll('.blush');
  const question = document.getElementById('question');

  let mouseX = 0;
  let mouseY = 0;
  let isHappy = false;
  let isVeryHappy = false;
  let isSad = false;

  // 跟踪鼠标位置
  document.addEventListener('mousemove', (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
    updateFaceExpression();
  });

  // 更新表情
  function updateFaceExpression() {
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;

    // 计算鼠标相对于中心的位置
    const relX = mouseX - centerX;
    const relY = mouseY - centerY;
    const distance = Math.sqrt(relX * relX + relY * relY);

    // 如果鼠标靠近"拒绝"按钮，优先显示难过表情
    const noBtnRect = noBtn.getBoundingClientRect();
    const isNearNoBtn =
            mouseX > noBtnRect.left - 50 &&
            mouseX < noBtnRect.right + 50 &&
            mouseY > noBtnRect.top - 50 &&
            mouseY < noBtnRect.bottom + 50;

    // 如果鼠标靠近"同意"按钮，优先显示开心表情
    const yesBtnRect = yesBtn.getBoundingClientRect();
    const isNearYesBtn =
            mouseX > yesBtnRect.left - 50 &&
            mouseX < yesBtnRect.right + 50 &&
            mouseY > yesBtnRect.top - 50 &&
            mouseY < yesBtnRect.bottom + 50;

    if (isVeryHappy) {
      // 非常开心状态（点击同意后）
      setVeryHappyFace();
    } else if (isHappy) {
      // 开心状态
      setHappyFace();
    } else if (isSad || isNearNoBtn) {
      // 难过状态
      setSadFace();
    } else if (isNearYesBtn) {
      // 鼠标靠近同意按钮
      setHappyFace();
    } else {
      // 根据鼠标位置动态变化
      const angle = Math.atan2(relY, relX);
      const normalizedDistance = Math.min(distance / 300, 1);

      // 眼睛跟随鼠标
      const eyeOffsetX = relX * 0.02;
      const eyeOffsetY = relY * 0.02;

      leftEye.style.transform = `translate(${eyeOffsetX}px, ${eyeOffsetY}px)`;
      rightEye.style.transform = `translate(${eyeOffsetX}px, ${eyeOffsetY}px)`;

      // 眉毛表情
      const eyebrowTilt = relX * 0.01;
      leftEyebrow.style.transform = `rotate(${5 + eyebrowTilt}deg)`;
      rightEyebrow.style.transform = `rotate(${-5 + eyebrowTilt}deg)`;

      // 嘴巴表情 - 基于鼠标Y位置
      if (relY < -100) {
        // 鼠标在上方 - 微笑
        mouth.style.width = '100px';
        mouth.style.height = '30px';
        mouth.style.borderRadius = '0 0 50px 50px';
        mouth.style.transform = 'translateY(0)';

        // 轻微脸红
        blushes.forEach(blush => {
          blush.style.opacity = '0.4';
        });
      } else if (relY > 100) {
        // 鼠标在下方 - 嘟嘴
        mouth.style.width = '60px';
        mouth.style.height = '20px';
        mouth.style.borderRadius = '50px';
        mouth.style.transform = 'translateY(10px)';

        blushes.forEach(blush => {
          blush.style.opacity = '0';
        });
      } else {
        // 鼠标在中部 - 中性
        mouth.style.width = '80px';
        mouth.style.height = '15px';
        mouth.style.borderRadius = '0';
        mouth.style.transform = 'translateY(5px)';

        blushes.forEach(blush => {
          blush.style.opacity = '0';
        });
      }

      // 根据距离改变脸的大小
      const scale = 1 - normalizedDistance * 0.1;
      face.style.transform = `scale(${scale})`;

      // 根据鼠标X位置倾斜脸部
      const tilt = relX * 0.01;
      face.style.transform += ` rotate(${tilt}deg)`;
    }
  }

  // 设置开心表情
  function setHappyFace() {
    // 微笑
    mouth.style.width = '100px';
    mouth.style.height = '30px';
    mouth.style.borderRadius = '0 0 50px 50px';
    mouth.style.transform = 'translateY(0)';

    // 圆眼睛
    leftEye.style.height = '35px';
    rightEye.style.height = '35px';
    leftEye.style.borderRadius = '50%';
    rightEye.style.borderRadius = '50%';

    // 平眉毛
    leftEyebrow.style.transform = 'rotate(0deg)';
    rightEyebrow.style.transform = 'rotate(0deg)';
    leftEyebrow.style.top = '-15px';
    rightEyebrow.style.top = '-15px';

    // 脸红
    blushes.forEach(blush => {
      blush.style.opacity = '0.8';
    });

    // 背景色
    document.body.style.background = 'linear-gradient(135deg, #e8f5e9 0%, #a5d6a7 100%)';

    // 问题文字颜色
    question.style.color = '#2e7d32';
  }

  // 设置非常开心表情
  function setVeryHappyFace() {
    setHappyFace();

    // 更大的微笑
    mouth.style.width = '120px';
    mouth.style.height = '40px';

    // 眨眼睛
    leftEye.style.height = '10px';
    rightEye.style.height = '10px';

    // 更红的脸
    blushes.forEach(blush => {
      blush.style.width = '50px';
      blush.style.height = '25px';
      blush.style.opacity = '1';
    });

    // 背景色
    document.body.style.background = 'linear-gradient(135deg, #c8e6c9 0%, #81c784 100%)';
  }

  // 设置难过表情
  function setSadFace() {
    // 难过的嘴
    mouth.style.width = '80px';
    mouth.style.height = '20px';
    mouth.style.borderRadius = '50px';
    mouth.style.transform = 'translateY(20px)';

    // 下垂的眼睛
    leftEye.style.height = '25px';
    rightEye.style.height = '25px';
    leftEye.style.borderTopLeftRadius = '0';
    leftEye.style.borderTopRightRadius = '0';
    rightEye.style.borderTopLeftRadius = '0';
    rightEye.style.borderTopRightRadius = '0';

    // 八字眉毛
    leftEyebrow.style.transform = 'rotate(15deg)';
    rightEyebrow.style.transform = 'rotate(-15deg)';
    leftEyebrow.style.top = '-20px';
    rightEyebrow.style.top = '-20px';

    // 无脸红
    blushes.forEach(blush => {
      blush.style.opacity = '0';
    });

    // 背景色
    document.body.style.background = 'linear-gradient(135deg, #ffebee 0%, #ef9a9a 100%)';

    // 问题文字颜色
    question.style.color = '#c62828';
  }

  // 同意按钮效果
  yesBtn.addEventListener('click', function() {
    isVeryHappy = true;
    isHappy = true;
    isSad = false;
    setVeryHappyFace();
    showMessage();
    createHearts();

    // 改变问题文字
    question.textContent = "谢谢你！我太开心了！";
  });

  yesBtn.addEventListener('mouseenter', function() {
    isHappy = true;
    isSad = false;
    setHappyFace();
  });

  yesBtn.addEventListener('mouseleave', function() {
    if (!isVeryHappy) {
      isHappy = false;
      updateFaceExpression();
    }
  });

  // 拒绝按钮效果
  noBtn.addEventListener('mouseenter', function() {
    isSad = true;
    isHappy = false;
    setSadFace();
  });

  noBtn.addEventListener('mouseleave', function() {
    if (!isVeryHappy) {
      isSad = false;
      updateFaceExpression();
    }
  });

  noBtn.addEventListener('mousemove', function(e) {
    // 按钮逃跑效果
    const rect = noBtn.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    if (x > 20 && x < rect.width - 20 && y > 20 && y < rect.height - 20) {
      const dx = Math.random() * 200 - 100;
      const dy = Math.random() * 100 - 50;
      noBtn.style.transform = `translate(${dx}px, ${dy}px)`;
    }
  });

  noBtn.addEventListener('click', function() {
    setSadFace();
    question.textContent = "请不要拒绝我...";
  });

  // 关闭消息
  closeMsg.addEventListener('click', function() {
    message.classList.remove('show');
  });

  function showMessage() {
    message.classList.add('show');
  }

  function createHearts() {
    hearts.innerHTML = '';

    // 创建多个爱心
    for (let i = 0; i < 30; i++) {
      setTimeout(() => {
        const heart = document.createElement('div');
        heart.className = 'heart';
        heart.innerHTML = '❤️';
        heart.style.left = Math.random() * 100 + '%';
        heart.style.top = Math.random() * 100 + 50 + '%';
        heart.style.animationDelay = Math.random() * 2 + 's';
        heart.style.fontSize = (Math.random() * 20 + 20) + 'px';
        hearts.appendChild(heart);

        // 移除爱心避免DOM过大
        setTimeout(() => {
          heart.remove();
        }, 4000);
      }, i * 100);
    }
  }

  // 初始更新
  updateFaceExpression();
</script>
</body>
</html>